<template>
    <div class="fw-card-com">
        <div
            v-if="title"
            class="card-title">
            {{ title }}
        </div>
        <div
            v-if="subTitle"
            class="card-subtitle">
            {{ subTitle }}
        </div>

        <div
            v-for="(item, index) in list"
            :key="index"
            class="card-item">
            <div class="c-item-title">{{ item.title }}</div>
            <div class="c-item-text">{{ item.text }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import type { CardList } from '@/types/card';
    const props = withDefaults(
        defineProps<{
            title?: string;
            subTitle?: string;
            list: CardList[];
        }>(),
        {
            list: () => [],
        }
    );
</script>

<style scoped lang="scss">
    // 导入响应式 mixins
    @use '@/styles/mixins/responsive' as *;

    .fw-card-com {
        background-color: #f7f7f7;
        border-radius: pxToRem(20);
        padding: pxToRem(40);
        box-sizing: border-box;
        text-align: initial;
        .card-title {
            font-size: pxToRem(31);
            font-weight: 800;
            font-family: 'SFProDisplayBold';
            margin-bottom: pxToRem(18);
        }
        .card-subtitle {
            font-family: 'SFProDisplayLight';
            font-size: pxToRem(28);
            margin-bottom: pxToRem(18);
        }
        .card-item {
            &:not(:last-child) {
                margin-bottom: pxToRem(20);
            }
            .c-item-title {
                font-family: 'SFProDisplayBold';
                font-size: pxToRem(26);
                font-weight: 800;
                line-height: pxToRem(70);
            }
            .c-item-text {
                font-family: 'SFProDisplayLight';
                font-size: pxToRem(28);
            }
        }
    }

    // 响应式设计 - 平板端 (768px及以下)
    @include mobile {
        .fw-card-com {
            border-radius: pxToRem75(20);
            padding: pxToRem75(40);
            .card-title {
                font-size: pxToRem75(31);
                margin-bottom: pxToRem75(18);
            }
            .card-subtitle {
                font-size: pxToRem75(28);
                margin-bottom: pxToRem75(18);
            }
            .card-item {
                &:not(:last-child) {
                    margin-bottom: pxToRem75(20);
                }
                .c-item-title {
                    font-size: pxToRem75(26);
                    line-height: pxToRem75(70);
                }
                .c-item-text {
                    font-size: pxToRem75(28);
                }
            }
        }
    }
</style>
